<h2>My Heroes</h2>
<div>
    <label for="new-hero">Hero name: </label>
    <input id="new-hero" #heroName />

    <!-- (click) passes input value to add() and then clears the input -->
    <button class="add-button" (click)="add(heroName.value); heroName.value=''">
        Add hero
    </button>
</div>
<ul class="heroes">
    <li *ngFor="let item of heroes" [class.selected]="item === selectedHero">
        <a routerLink="/detail/{{item.id}}">
            <span class="badge">{{item.id}}</span> {{item.name}}
        </a>
        <button class="delete" title="delete hero" (click)="delete(item)">x</button>
    </li>
</ul>
<!-- <main *ngIf="selectedHero">
    <h2>{{selectedHero.name}} Details</h2>
    <div><span>id: </span>{{selectedHero.id}}</div>
    <div>
        <label for="hero-name">Hero name: </label>
        <input type="text" id="hero-name" [(ngModel)]="selectedHero.name" placeholder="name">
    </div>
</main> -->
<!-- <app-hero-detail [hero]="selectedHero"></app-hero-detail> -->